<template>
  <div class="about">
    <div class="container py-5">
      <div class="row">
        <div class="col-md-8 mx-auto text-center">
          <h1 class="mb-4">关于我们</h1>
          <p class="lead">命理定义致力于为用户提供专业的命理分析服务</p>
        </div>
      </div>

      <div class="row mt-5">
        <div class="col-md-6">
          <h2 class="mb-4">我们的使命</h2>
          <p>通过现代科技与传统命理的结合，为用户提供准确、专业的命理分析服务，帮助用户更好地了解自己，把握人生方向。</p>
          <ul class="list-unstyled">
            <li class="mb-3">
              <i class="bi bi-check-circle-fill text-success me-2"></i>
              专业的命理分析团队
            </li>
            <li class="mb-3">
              <i class="bi bi-check-circle-fill text-success me-2"></i>
              先进的数据分析技术
            </li>
            <li class="mb-3">
              <i class="bi bi-check-circle-fill text-success me-2"></i>
              个性化的服务方案
            </li>
          </ul>
        </div>
        <div class="col-md-6">
          <img src="/images/about-image.jpg" alt="About Us" class="img-fluid rounded shadow">
        </div>
      </div>

      <div class="row mt-5">
        <div class="col-md-12">
          <h2 class="text-center mb-4">我们的团队</h2>
          <div class="row g-4">
            <div class="col-md-4">
              <div class="card team-card">
                <div class="card-body text-center">
                  <img src="/images/team-1.jpg" alt="Team Member" class="rounded-circle mb-3" width="150">
                  <h5 class="card-title">张三</h5>
                  <p class="card-text text-muted">创始人 & CEO</p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card team-card">
                <div class="card-body text-center">
                  <img src="/images/team-2.jpg" alt="Team Member" class="rounded-circle mb-3" width="150">
                  <h5 class="card-title">李四</h5>
                  <p class="card-text text-muted">技术总监</p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card team-card">
                <div class="card-body text-center">
                  <img src="/images/team-3.jpg" alt="Team Member" class="rounded-circle mb-3" width="150">
                  <h5 class="card-title">王五</h5>
                  <p class="card-text text-muted">命理分析师</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style scoped>
.team-card {
  transition: transform 0.3s ease;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.team-card:hover {
  transform: translateY(-5px);
}

.team-card img {
  object-fit: cover;
  height: 150px;
  width: 150px;
}
</style> 